<template>
  <div class="">
    <!-- 表格 -->
    <ele-pro-table
      v-if="model_type"
      ref="tableRef"
      :row-key="(record) => record.id"
      :columns="columns"
      :datasource="datasource"
      :toolkit="[]"
      :need-page="false"
      v-model:selection="selection"
      :scroll="{ x: 'max-content', y: 'max-content' }"
    >
      <template #toolbar>
        <slot name="toolbar"></slot>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.name === 'status'">
          <a-switch
            :disabled="record.edits == 0"
            :checked="record.status == 1"
            @change="switchChange($event, column, record)"
          />
        </template>
        <template v-else-if="column.name === 'require'">
          <a-switch
            :disabled="record.edits == 0"
            :checked="record.require == 1"
            @change="switchChange($event, column, record)"
          />
        </template>
        <template v-else-if="column.name === 'secret'">
          <a-switch
            :checked="record.secret == 1"
            @change="switchChange($event, column, record)"
          />
        </template>
        <template v-else-if="column.key === 'action'">
          <a-space>
            <!-- 此处v-permission的值需要做处理，权限接口返回的权限前面没有“/”此处接口返回的权限开头是“/”，所以要接去后传入权限校验方法 -->
            <a
              v-for="item in column.param"
              :key="item.url"
              v-permission="item.url"
            >
              <template v-if="item.name == '置顶'">
                <img
                  src="@/assets/to-first.png"
                  v-if="record.indexId != 1"
                  @click="upDown(3, column, record)"
                />
              </template>
              <template v-else-if="item.name == '上'">
                <img
                  src="@/assets/to-prev.png"
                  v-if="record.indexId != 1"
                  @click="upDown(1, column, record)"
                />
              </template>
              <template v-else-if="item.name == '下'">
                <img
                  src="@/assets/to-next.png"
                  v-if="record.indexId != count"
                  @click="upDown(2, column, record)"
                />
              </template>
              <template v-else-if="item.name == '置底'">
                <img
                  src="@/assets/to-last.png"
                  v-if="record.indexId != count"
                  @click="upDown(4, column, record)"
                />
              </template>
            </a>
          </a-space>
        </template>
        <template v-else></template>
      </template>
    </ele-pro-table>
  </div>
</template>

<script setup>
  import { ref, onMounted, watch } from 'vue';
  import formatColumns from '@/utils/tableColumnsFormat';
  import { useRouter } from 'vue-router';
  import { actionFn } from '@/utils/action.js';
  import { get_list } from '@/api/material/receipts_templete';

  const router = useRouter();
  const { push } = useRouter();
  const props = defineProps({
    apiFun: Function,
    model_type: [String, Number]
  });
  // 表格实例
  const tableRef = ref(null);
  // 表格列配置
  let columns = ref([]);
  // 表格选中数据
  const selection = ref([]);
  const count = ref(0);
  const model_type = ref(null);

  watch(
    () => props.model_type,
    (newValue, oldValue) => {
      console.log('model_type==', model_type);
      model_type.value = newValue;
    }
  );
  // 表格数据源
  const datasource = ({ page, limit, where }) => {
    return props.apiFun({
      page,
      limit,
      page_size: 9999,
      filters: {
        model_type: model_type.value,
        ...where
      }
    });
  };
  // 表头/搜索栏，数据
  props.apiFun().then(async (res) => {
    console.log(13);
    columns.value = await formatColumns(res.columns);
    count.value = res.count ? res.count : 0;

    selection.value = undefined;
  });

  const changeType = (type) => {
    model_type.value = type;
    reload();
  };

  /* 搜索 */
  const reload = (where) => {
    tableRef?.value?.reload({ page: 1, where });
  };

  // siwtchchange开关
  const switchChange = async (e, column, record) => {
    const url = router.currentRoute.value.path.split('/');
    const apiUrl = `/${url[1]}/${url[2]}/quick_edit`;
    await actionFn(
      { url: apiUrl },
      { id: record.id, field: column.field, value: e ? '1' : '0' },
      reload
    );
  };
  // 上下调整顺序
  const upDown = async (e, column, record) => {
    const url = router.currentRoute.value.path.split('/');
    const apiUrl = `/${url[1]}/${url[2]}/edit_sort`;
    await actionFn({ url: apiUrl }, { id: record.id, type: e }, reload);
  };

  // **重点！！这里需要使用defineExpose暴露出去**
  defineExpose({
    reload,
    changeType
  });
</script>

<style>
  .logo {
    width: 40px;
  }
</style>
